<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>HTML Manual</title>
<style>
body {
background-color:Linen;
}
p {
color:green;
/*Font-styling->*/
/*letter-spacing:-1px;*/
text-align:justify;
/*text-decoration: blink;*/
font-family: verdana, Helvetica, sans-serif;
font-style:italic;
font-weight:bold;
}
h1, h2, h3, h4, h5, h6 /* grouping */ {
font-family:arial;
font-weight:normal;
}
</style>
</head>
<body>
<h1>HTML Manual</h1>
<hr />
<!-- Jeg laver neskabelon til manualen med overskrift, forklarende tekst og et eksempel -->
<!-- http://www.ascii.cl/htmlcodes.htm-->
<!-- http://www.w3schools.com-->
<!-- Tilføj følgende tags: h1..h6, p, em, strong, br /, hr /, img /, ol, ul, a-->
<h2><h1...h6> Heading - overskrift</h2>
<p>Headings kommer i 6 forskellige størrelser, fra 1-6. Hvor 6 er mindst og 1 er størst.</p>
<h3>Eksempel:</h3>
<h1>Oversekrift 1</h1>
<h2>Overskrift 2</h2>
<h3>Overskrift 3</h3>
<h4>Overskrift 4</h4>
<h5>Overskrift 5</h5>
<h6>Overskrift 6</h6>
<hr />
<a name="paragrahs"></a>
<h2><p> Paragraphs - afsnit</h2>
<p>Paragraphs er afsnit.</p>
<h3>Eksempel:</h3>
<p>Her er en paragraph</p>
<p>Her er en paragraph mere...</p>
<hr />
<h2><em> Emphasized - fremhævet/kursiv skrift</h2>
<p>Bruges til at lave kursiv skrift, altså fremhæve tekstne. Der findes også et tag <i> som OGSÅ lave kursiv tekst. Hvad er så forskellen?? Stort set ingen. msan siger at em udover at lave teksten kursiv rent visual, yderligere fremhæver meningen.</p>
<h3>Eksempel:</h3>
<p>Her er en sætning med noget <em>tekst</em> der er fremhævet..</p>
<hr />
<h2><strong> Strong - fed skrift</h2>
<p>Bruges til at fremhæve tekst, og gøre teksten fed. Man kan også bruge <b>(for bold) tagget. Ligesom med em/i taggene, fremhæver strong tagget også meningen, og giver ikke kun den visuelle effekt.</p>
<h3>Eksempel:</h3>
<p>Her er en sætning med <strong>fed skrift</strong> i...</p>
<hr />
<h2><hr /> Horizontal rule - horisontal linie</h2>
<p>Bruges til at adskille tekst og elementer. Simpel grafisk formatering, men effektiv.</p>
<p>Dette er en af de tre undtagelser fra reglen om at der altid er et start og et slut-tag. De tre undtagelser er br, hr og img taggene.</p>
<h3>Eksempel:</h3>
<p>Her er en paragraph ovenover min horizontal rule</p>
<hr />
<p>Her er en paragraph under min horizontal rule</p>
<hr />
<h2><br /> Break - linieskift</h2>
<p>Bruges til et enkelt linieskift. Bruges i meget sjældne nødstilfælde..</p>
<p>Dette er en af de tre undtagelser fra reglen om at der altid er et start og et slut-tag. De tre undtagelser er br, hr og img taggene.</p>
<h3>Eksempel:</h3>
<p>Her er en paragraph, hvor der er brugt<br /> et break tag midt i...</p>
<hr />
<a name="img"></a>
<h2><img /> Image - billede</h2>
<p>Bruges til at indsætte billeder. Det er cool! Man skal begynde med at indsætte tagett, derefter, kan fortælle hvor billedet ligger placeret ved hjælp af source tagget -> src="". Man kan både bruge URL, altså webadresser og relative stier til billeder, som ligger i en img mappen i www mappen inde i projektet. Title="" bruges til at lave en svævende hover effekt med information.
</p>
<p>Dette er en af de tre undtagelser fra reglen om at der altid er et start og et slut-tag. De tre undtagelser er br, hr og img taggene.</p>
<h3>Eksempel:</h3>
<img src="http://hm.dk/_borders/dkside2.jpg" />
<img src="img/sas.gif" title="Konkurs/ ikke konkurs??" />
<hr />
<a name="lister"></a>
<h2><ol>, <ul> og <li> Ordered, unordered list, list items - Lister</h2>
<p>Lister bruges til opstilling af data. Der findes to forskellige lister, nemlig ordnede og uordnede. ul = unordered list, ol = ordered list, li = list item (et enkelt punkt på listen)</p>
<h3>Eksempel:</h3>
<ol>
<li>Øl</li>
<li>Faxe Kondi</li>
<li>Friskpresset juice</li>
<li>Banan smoothie</li>
</ol>
<ul>
<li>Mercedes</li>
<li>DAF</li>
<li>Audi</li>
<li>VW</li>
<li>Hyundai</li>
<li>Aston Martin - aka Bondmobile</li>
</ul>
<hr />
<a name="links"></a>
<h2><a> anchor Links - henvisninger</h2>
<p>Vi deler links op i fire forskellige afsnit. 1. Interne links, 2. eksterne links, 3. mailto links, og 4. named anchors. a = anchors, det hedder det vist pga named anchors. href="" = hyperlink reference, title="" kan også bruges ved links.</p>
<p>Anatomien i et link: <a href="kilde destination"> link tekst </a></p>
<ol>
<li>
<h3>Interne links</h3>
<p>Bruges i navigations menuer. Et godt råd er at linke til forklaringer andet sted på ens site, hvis man har en dybere forklaring af et ord/begreb. </p>
<h3>Eksempel:</h3>
<p>Her kan du hoppe hen og læse på <a href="side2.html" title="Wow, er der flere sider!? :O">side 2</a></p>
<a href="side3.html">Side 3</a>
</li>
<li>
<h3>Eksterne links</h3>
<p>Bruges til at linke ud fra egen site. Brug helst altid target="_blank" for at åbne linket i et nyt vindue. Så holder man brugeren inde på vores side.</p>
<h3>Eksempel:</h3>
<p>Her kan du læse mere om <a href="http://politiken.dk/erhverv/ECE1811227/kabinepersonale-boykotter-moeder-med-sas-ledelse/" title="Se Politikens.dk´s dækning af SAS-sagen" target="_blank">problematikken i SAS</a></p>
<a href="http://www.dr.dk" target="_blank" title="Danmarks Radio">Dr.dk</a>
</li>
<li>
<h3>Mailto links</h3>
<p>Bruges til at åbne mailprogram, med en mail med udfyldt adressant. Lad være med at bruge denne pga. spam.</p>
<h3>Eksempel:</h3>
<p>Send mig en mail på min <a href="mailto:info@minmail.dk">MAILADRESSE</a>, og så husk ikke at bruge denne meode til det!</p>
</li>
<li>
<h3>Images as links - billeder som links</h3>
<p>Vi kan også gøre billeder til 'linktekst'. Vi skifter altså link tekst ud med et billede. Således at man kan klikke på billeder og gå til en href..</p>
<h3>Eksempel:</h3>
<p>Tryk på logo for at gå til SASs hjemmeside-></p>
<a href="http://www.sas.dk" target="_blank" title="Uha, pas nu på i ikke flader ned fra Skyerne!"><img src="img/sas.gif" /></a>
<a><img /></a>
</li>
<li>
<h3>Named anchors</h3>
<p>Named anchors bruges til at springe rundt på en side, og endda imellem sider. Når man bruger named anchors, skal man lave to links. Et der sender afsted (synligt) og et der fanger (usynligt). Det der sender afsted ligner et normal link, husk dog at begynder link destinationen med #. Linket der skal fange har IKKE nogen href, men kun name="", her uden #.</p>
<h3>Eksempel:</h3>
<p>Her kan du læse i min HTML Manual om følgende emner:</p>
<ul>
<li><a href="#paragrahs">paragraphs</a></li>
<li><a href="#lister">lister</a></li>
<li><a href="#img">indsæt billeder</a></li>
</ul>
</li>
</ol>
<hr />
<h2><table>, <tr> og <td> Tables - tabeller</h2>
<p>Tabeller brugte man i gamle dage til at lay-oute med. Idag bør man KUN bruge tabeller til at præsentere data. table = tabel, tr = table row, td = table data</p>
<h3>Eksempel:</h3>
<table border=1>
<tr><!-- Første række - A rækken -->
<td>A100</td>
<td>A200</td>
<td>A300</td>
<td>A400</td>
</tr>
<tr><!-- Anden række - B rækken -->
<td>B100</td>
<td>B200</td>
<td>B300</td>
<td>B400</td>
</tr>
<tr><!-- Tredje række - C rækken -->
<td>C100</td>
<td>C200</td>
<td>C300</td>
<td>C400</td>
</tr>
</table>
</body>
</html>
]]>